<template>
	<view>	
		<view>
			<!-- 	<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/sd-title.png"
					style="width: 100%; height: 300rpx; border-radius: 20rpx;" mode=""></image> -->
					<view v-if="roleName == '部门经理'" style="margin: 20rpx; color: white;background-color: #0042f4; height: 250rpx; font-size: 30rpx; line-height: 35px; ">
						<uni-row >
							<uni-col :span="12" >
								<view style=" display: flex; justify-content: center;  align-items: center; line-height: 60px;">每日统计</view>
							</uni-col>
							<uni-col :span="12" >
								<view style=" display: flex; justify-content: center;  align-items: center; line-height: 60px;">{{statisticalData.attendanceRate}}</view>	
							</uni-col>
						</uni-row>
						<uni-row >
							<view style="display: flex; justify-content: center;  align-items: center; height: 1rpx; background-color: white;"></view>
						</uni-row>
						<uni-row>
							<uni-col :span="6" >
								<view style=" display: flex; justify-content: center;  align-items: center;">应到人数</view>
							</uni-col>
							<uni-col :span="6" style=" display: flex; justify-content: center;  align-items: center;">
								<view style=" display: flex; justify-content: center;  align-items: center;">实到人数</view>
							</uni-col>
							<uni-col :span="6" style=" display: flex; justify-content: center;  align-items: center;">
								<view style=" display: flex; justify-content: center;  align-items: center;">未到人数</view>
							</uni-col>
							<uni-col :span="6" style=" display: flex; justify-content: center;  align-items: center;">
								<view style=" display: flex; justify-content: center;  align-items: center;">请假人数</view>
							</uni-col>							
						</uni-row>
						<uni-row>
							<uni-col :span="6" >
								<view style=" display: flex; justify-content: center;  align-items: center;">{{statisticalData.needClockCount}}</view>
							</uni-col>
							<uni-col :span="6" style=" display: flex; justify-content: center;  align-items: center;">
								<view style=" display: flex; justify-content: center;  align-items: center;">{{statisticalData.clockInPerCount}}</view>
							</uni-col>
							<uni-col :span="6" style=" display: flex; justify-content: center;  align-items: center;">
								<view style=" display: flex; justify-content: center;  align-items: center;">{{statisticalData.unClockPerCount}}</view>
							</uni-col>
							<uni-col :span="6" style=" display: flex; justify-content: center;  align-items: center;">
								<view style=" display: flex; justify-content: center;  align-items: center;">{{statisticalData.leavePerCount}}</view>
							</uni-col>
						</uni-row>
					</view>
		   <uni-card style="padding-bottom: 20rpx;" v-for="(item,index) in classList" :key="item.classId" :title="item.className" :extra="item.attendanceRate">
			   
			  <!-- <view style="display: flex; padding: 40rpx 20rpx;"> -->
			   <!-- 	<image style="width:200rpx; height: 250rpx;"
			   		:src="item.studentImg !=''? item.studentImg:'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png'"
			   		@click="clickImg(item.studentImg)" mode=""></image> -->
	<!-- 		   	<view class="" style="font-size: 24rpx; width: 280rpx;">
			   		<view>班级人数：{{item.classPerCount}}</view>
			   		<view>住宿人数：{{item.boarderStuCount}}</view>
			   		<view>请假人数：{{item.leavePerCount}}</view> -->
			 <!--  		<view>当前审批人：{{item.currentApprover}}</view>
			   		<view>当前审批节点：{{item.currentNode}}</view>
			   		<view style="display: flex;">申请单状态：
			   			<view v-if="item.applyStatus == 0"><text>申请被驳回</text></view>
			   			<view v-if="item.applyStatus == 1" style="color: #fe0000;"><text>处理中</text></view>
			   			<view v-if="item.applyStatus == 2"><text>申请被撤回</text></view>
			   			<view v-if="item.applyStatus == 10"><text style="color: green;">已处理</text></view>
			   		</view> -->
			<!--   	</view>
			   </view> -->
			<uni-row>
				<uni-col :span="8">
					<view style="line-height: 35px; display: flex;">班级人数：
					<view>{{item.classPerCount}}</view>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view style="line-height: 35px; display: flex; ">住宿人数：
					<view style="color: #fe0000;" @click="toDormitoryStuDetail(item, 'dormitory')">{{item.boarderStuCount}}</view>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view style="line-height: 35px; display: flex; ">请假人数：
					<view style="color: #fe0000;" @click="toDormitoryStuDetail(item, 'leave')">{{item.leavePerCount}}</view>
					</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="8">
					<view style="line-height: 35px; display: flex; ">应到人数：
					<view>{{item.needClockCount}}</view>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view style="line-height: 35px; display: flex; ">实到人数：
					<view style="color: #fe0000;" @click="toDormitoryStuDetail(item, 'inclcok')">{{item.clockInPerCount}}</view>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view style="line-height: 35px; display: flex; ">未到人数：
						<view style="color: #fe0000;" @click="toDormitoryStuDetail(item, 'unclock')">{{item.unClockPerCount}}</view>
					</view>
				</uni-col>
			
			</uni-row>
		   </uni-card>
		   <view v-if="classList.length <= 0" style="padding-bottom: 20rpx;">
		   	<image style="width: 400rpx;height: 400rpx; position: absolute; left: 20%; top:20%"
		   		src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
		   </view>
		</view>
	</view>
</template>

<script>
	 import dormitory from '@/api/modules/dormitory'
	 	import {
	 		parseTime
	 	} from "@/utils/date.js"
	 	export default {
	 		data() {
	 			return {
					statisticalData: {
						needClockCount: 0,
						clockInPerCount: 0,
						needClockCount: 0,
						leavePerCount: 0,
						attendanceRate: '出勤率: 0.00%'
					},
					operateType: '',
					userId: '',
	 				userName: '',
	 				topName: '',
					roleName: '',
	 				classList: [],
					dateTime: ''
	 			}
	 		},
	 		methods: {
				getStatisticalData() {
					console.log(this.userId + this.dateTime + this.operateType)
					dormitory.getAttenceStatisticalData(this.userId, this.dateTime, this.operateType).then(res => {
						this.statisticalData = res.data
					})
				},
	 			getStudentList(){
					uni.showLoading({
						mask: true,
						title: '加载中'
					});
					console.log("获取未打卡数据")
					dormitory.getDormitoryAttenceSummary(this.userId, this.dateTime,this.operateType).then(res => {
						this.classList = res.data
						uni.hideLoading();
					}).catch(e => {
						uni.hideLoading();
					})
	 			},
				toDormitoryStuDetail(item, unclcok) {
					console.log("toDormitoryStuDetail")
					var classId = item.classId
					if(this.operateType == "dormitory") {
						uni.navigateTo({
							url:`/pages_duty/classTeacher/dormitoryAttence/dormitoryUnclockRecord?dateTime=${this.dateTime}&className=${item.className}&classId=${classId}&type=${unclcok}`
						})
					}
					if(this.operateType == "weekend") {
						console.log("获取周末未打卡数据详情")
						uni.navigateTo({
							url:`/pages_duty/classTeacher/dormitoryAttence/weekendUnclockRecord?dateTime=${this.dateTime}&className=${item.className}&classId=${classId}&type=${unclcok}`
						})
					}
				}
	 		},
	 		onLoad(options) {
				uni.getStorage({
					key: "loginName",
					success: (res) => {
						this.userName = res.data//获取用户姓名
					}
				})
				// uni.getStorage({
				// 	key: "loginId",
				// 	success: (res) => {
				// 		this.userId = res.data//获取用户id
				// 	}
				// })
				this.userId = uni.getStorageSync("loginId");
				this.roleName = uni.getStorageSync("userRole");
				this.operateType = options.operateType;
				// this.userId = options.userId
	 			this.dateTime=options.dateTime
				this.getStatisticalData();
				console.log(this.dateTime)
				console.log(this.userId)
	 			this.getStudentList();
			
	 		}
	 	}
</script>

<style>
	.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		},
		.title{
			font-size: 18rpx;
			font-weight: bolder;
		}
		.uni-card__header-extra-text{
			color: white;
		},
		.uni-card__header-content{
			color: white;
		}
</style>